<template>
  <div>
    <!-- 行内样式动态绑定 -->
    <div style="color: pink; font-size: 30px">武松</div>
    <div :style="styleObj">🐅</div>
    <!-- 类名动态控制 -->
    <h1 class="a b">孙悟空</h1>
    <h1 @click="flag = !flag" :class="['c', 'd', flag ? 'e' : 'f']">猪八戒</h1>
    <h1 :class="classObj">沙悟净</h1>
    <h1 :class="classArr">唐僧</h1>
  </div>

</template>

<script setup>
import { ref } from "vue";
const flag = ref(true);
const classObj = ref({ g: true, h: false });
const classArr = ref([{ l: false, m: true }, "n"]);
const styleObj = ref({ fontSize: "40px" });


</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
}
.a {
  color: aqua;
}
.b {
  background-color: #fff;
}
.e {
  background-color: pink;
}
.f {
  background-color: rgb(130, 130, 130);
}
.g {
  color: blueviolet;
}
</style>